<template>
	<view class="ar-list">
		<view class="home-header">
			 <view class="active">
				 
				 <view class="active-item" v-for="(item,index) in weetType"  v-bind:class="[index==opCard_stic?'sticStyle':'']" @click="handldTabList(item,index)">{{item.name}}</view>
			 </view>
			 <view class="home-fill">
			 </view>
			 <image src="/static/images/shaixuan.png" style="width: 17px;height: 17px; margin: auto;" @click="hanldHomefiltr()"></image>
		 </view>
		<view class="ar-info">
			<view class="notice-wra" v-for="(item,index) in weetlist" :key="index" @click="hanldNoticeInfo(item)">
				<view class="no-right">
					<image  :src="item.image"></image>
				</view>
				<view class="no-left" style="width: 80%;">
					<view class="no-text">{{item.titlt}}</view>
					<view style="color: #999999;font-size: 13px;padding-top: 5px;">{{item.create_time}}</view>
				</view>
			
			</view>
			<uni-load-more
			:status="loadStatus"
			></uni-load-more>
		</view>
		
		<!--筛选弹框-->
		<view class="screen" v-if="filter">
					 <view style="padding: 0 17px;overflow: scroll;padding-bottom: 100px;">
						 <view class="screen-item">
							 <view class="screen-title">排序</view>
							 <view class="screen-text">
								 <view class="screen-con" v-for="(item,index) in sortType" @click="hanldSortType(index)"  v-bind:class="[index==type_stic?'typeStyle':'']">{{item}}</view>
							 </view>
						 </view>
						
					</view>
					 <view class="screen-but">
						 <view class="search-no" @click="hanldNO()">
							 重置
						 </view>
						 <view class="search-ok" @click="hanldOk()">
							 确认
						 </view>
					 </view>
					 
		</view>
		<view class="screen-bg" v-if="filter" @click="hanldHomeClos()"></view>
		<!--底部-->
		
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		data() {
			return {
				tabList: ['一月','二月','三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月','十二月'],
				opCard_stic:0,
				filter:false,
				sortType:['默认排序','最新发布'],
				id_sort:"asc",//排序
				weetlist: [],
				loadStatus: 'more',
				page: 1,
				weetId:"",//推文id
				month:1,//月份
				type_stic:0,//推文类型index
				weetType:[],
				subtype:[],//小type
				subId:''
			}
		},
		onShow() {
			// this.weetlist = [];
			// this.page = 1;
			// this.gettWeetType();
		},
		onLoad(options){
			this.weetId = options.id;
			this.page = 1;
			this.weetlist = [];
			this.gettWeetType();
		},
		components: {uniLoadMore},
		onReachBottom () {
			if (this.loadStatus === 'more') {
				this.gettWeetList()
			}
		},

		methods: {
			//选择tab
			handldTabList(item,index){
				console.log(index)
				this.opCard_stic = index;
				this.subId = item.id;
				this.page = 1;
				this.gettWeetList(true);
			},
			hanldHomefiltr(){
				this.filter = true
			},
			hanldHomeClos(){
				this.filter = false
			},
			
			//推文详情
			hanldNoticeInfo(item){
				let aa = item.id
				// let aa = item;
				// let bb = JSON.stringify(aa)
				// let cc = encodeURIComponent(bb);

				uni.navigateTo({url:`articleInfo?address=${aa}`})
			},
			//排序筛选
			hanldSortType(index){
				this.type_stic = index;
				if(index==0){
					this.id_sort = 'asc'
				}
				if(index==1){
					this.id_sort = 'desc'
				}
			},
			
			//推文类型
			gettWeetType() {
				let token = uni.getStorageSync('accessToken')
				const params = {
					pid: this.weetId
				}
				this.$http.get('/tweet/type',{params: params}).then((response) => {
					const res = response.data;
					if (res.code==0) {
						this.weetType = res.data;
						this.subId = this.weetType[0].id;
						this.opCard_stic = 0;
						this.gettWeetList();
				   }
				})
			},
			//确定
			hanldOk(type){
				this.page = 1;
				this.gettWeetList(true)
			},
			//重置
			hanldNO(type){
				this.page = 1;
				this.id_sort = 'asc';
				this.type_stic = 0;
				this.gettWeetList(true)
			},
			//推文列表
			gettWeetList(type) {
				let token = uni.getStorageSync('accessToken')
				const params = {
					type: this.weetId,
					page: this.page,
					id_sort:this.id_sort,
					subtype:this.subId
				}
				
				this.loadStatus = 'loading'
				this.$http.get('/tweet/list', {params: params}).then((response) => {
					const res = response.data;
					console.log(res)
					if (res.code==0) {
						if (this.page > res.data.last_page) {
							// 没有数据了
							this.loadStatus = 'noMore'
						} else {
							// 未加载完毕
							this.loadStatus = 'more'
							this.page ++
						}
						console.log(type)
						if(type){
							this.weetlist = res.data.data
						}else{
							this.weetlist = [...this.weetlist, ...res.data.data];
						}
						this.filter = false
					} else {
					   this.filter = false
					}
				})
			},
		}
	}
</script>

<style scoped>
	.home-header{
		display: flex;
		flex-direction: row;
		background-color: #fff;
		    position: fixed;
		    width: 100%;
		    z-index: 999;
			height: 32px;
	}
.active{
	display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: row;
	    flex-direction: row;
	    background-color: #fff;
	    width: 83%;
	    overflow-y: scroll;
	    white-space: nowrap;
		align-items: center;
}
.active-item{
	padding: 0 18px;
	font-size: 15px;
	color: #333333;
}
.home-fill image{
	width: 18px;
	height: 18px;
}
.home-fill{
	background:linear-gradient(83deg,rgba(238,238,238,0) 0%,rgba(0,0,0,0.08) 100%);
	 width: 16px;
}

	.no-text{
		  overflow: hidden;
		      display: -webkit-box;
		      text-overflow: ellipsis;
		      -webkit-line-clamp: 2;  /*要显示的行数*/
		      -webkit-box-orient: vertical;
	}
	.no-left{
		padding-left: 10px;
	}
.notice-wra{
	display: flex;
	flex-direction: row;
	    margin: 10px 0;
}
.no-right image{
	width: 100px;
	height: 75px;
	border-radius: 5px;

}
.ar-info{
	    padding: 40px 15px 0 15px;
	    width: 100%;
	    height: 100%;
	    position: absolute;
}
.sticStyle{
		font-size: 18px;
		color: #FF5F49;
		font-weight: bold;
	}
	
	.typeStyle{
			color: #FF5F49 !important;
			border: 1px solid  #FF5F49 !important
		}
	
	.screen{
		height: 200px;
		background-color: #fff;
		position: fixed;
		/*  #ifdef  H5 */
		top:76px;
		/*  #endif  */
		
		/*  #ifdef  MP-WEIXIN */
		top:32px;
		/*  #endif  */
		
		width: 100%;
		display: flex;
		flex-direction: column;
		    z-index: 99;
	}
	.screen-text{
		display: flex;
		flex-direction: row;
		    flex-wrap: wrap;
	}
	.screen-con{
		 width: 31%;
		     height: 34px;
		     border-radius: 5px;
		     border: 1px solid #E7E7E7;
		     font-size: 15px;
		     line-height: 34px;
		     text-align: center;
		     color: #333333;
		     margin-top: 9px;
			 margin-right: 14upx;
	}
	 .screen-con:last-child { 
		 margin-right: 0;
	 }
	
	.screen-title{
		    padding: 14px 0 0;
			font-size: 14px;
	}
	.search-no{
		width:50%;
		height:44px;
		background:rgba(219,219,219,1);
		text-align: center;
		line-height: 44px;
		font-size: 15px;
		color: #fff;
	}
	.search-ok{
		width:50%;
		height:44px;
		background:rgba(255,95,73,1);
		text-align: center;
		line-height: 44px;
		font-size: 15px;
		color: #fff;
	}
	.screen-but{
		position: absolute;
		bottom: 0;
		display:flex;
		flex-direction: row;
		width: 100%;
	}
	.screen-bg{
		position: fixed;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,0.6);
	}
	

</style>
